<!--
* @Author: white_queen
* @Date: 2025-01-07 21:22:41
* @LastEditors: white_queen
* @LastEditTime: 2025-01-15 17:03:18
* @FilePath: /components/newsItem/newsItem.vue
* @Description: 文章组件
-->
<template>
	<view class="list">
		<view class="item" @click="clickNewsItem(item.id)" v-for="item in list" :key="item.id">
			<image class="left" :src="item.img" mode="aspectFill"></image>
			<view class="right">
				<view class="title">{{ item.title }}</view>
				<view class="content">
					{{ item.content }}
				</view>
				<view class="bottom">
					<view class="time">{{ item.created_at }}</view>
					<view class="iconbox">
						<hz-icon name="praise" size="40rpx" color="#333333"></hz-icon>
						<view class="time">{{ item.likes_num }}</view>
					</view>
					<view class="iconbox">
						<hz-icon name="liulan" size="40rpx" color="#333333"></hz-icon>
						<view class="time">{{ item.see_num }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'newsItem',
	props: {
		list: {
			type: Array,
			required: true
		}
	},
	data() {
		return {};
	},
	methods: {
		clickNewsItem(id) {
			uni.$u.toast(`点击了id${id},跳转文章详情`);
			console.log(`点击了id${id},跳转文章详情`);
			uni.navigateTo({
				url: `/news/detail?id=${id}`
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.list {
	width: 690rpx;
	display: flex;
	flex-direction: column;
	gap: 20rpx;
	margin: 20rpx 0;
}
.item {
	width: 690rpx;
	padding: 20rpx 20rpx;
	box-sizing: border-box;
	display: flex;
	background-color: #fff;
	box-shadow: 0 4rpx 24rpx 0 rgba(0, 0, 0, 0.1);
	border-radius: 10rpx;
	gap: 40rpx;
	.left {
		width: 200rpx;
		height: 200rpx;
	}
	.right {
		width: 450rpx;

		display: flex;
		flex-direction: column;
		gap: 20rpx;
		.title {
			font-size: 36rpx;
			font-weight: bold;
			width: 100%;
			white-space: nowrap; /* 禁止文本换行 */
			overflow: hidden; /* 隐藏超出容器的内容 */
			text-overflow: ellipsis; /* 使用省略号表示被隐藏的内容 */
		}
		.content {
			height: 90rpx;
			color: #999;
			font-size: 30rpx; /* 注意：rpx 可能是特定框架（如微信小程序）的单位，普通CSS中使用px, em, rem等 */
			width: 100%;
			display: -webkit-box; /* 使用WebKit的私有属性 */
			-webkit-box-orient: vertical; /* 设置子元素的排列方式为垂直 */
			-webkit-line-clamp: 2; /* 限制显示的文本行数 */
			overflow: hidden; /* 隐藏超出容器的内容 */
			text-overflow: ellipsis; /* 在文本溢出时显示省略号（但在这里text-overflow实际上不起作用，因为-webkit-line-clamp已经处理了溢出） */
			line-height: 1.5; /* 设置行高，这个值应该根据你的字体大小和布局需求来调整 */
			max-height: calc(30rpx * 1.5 * 2); /* 最大高度，等于行高乘以行数（这里假设行高为1.5，行数为2） */
			/* 注意：由于rpx可能不是所有环境都支持，这里使用calc计算时可能需要调整单位 */
		}
		.bottom {
			display: flex;
			align-items: center;
			justify-content: space-between;
			.iconbox {
				display: flex;
				align-items: center;
				gap: 10rpx;
			}
		}
	}
}
</style>
